<style lang="scss">
  @import "~common/style/common";
  .rotating {
    -webkit-animation: 2s ease 0s infinite rotating;
    animation: 2s ease 0s infinite rotating;
  }
  @keyframes rotating {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
  }
  @-webkit-keyframes rotating {
    from {
      -webkit-transform: rotate(0);
    }
    to {
      -webkit-transform: rotate(360deg);
    }
  }
  .loading-tip {
    position: fixed;
    width: 100%;
    height: 100vh;
    background-color: #000;
    opacity: 0.6;
    color: #ffffff;
    font-size: 25px;
    text-align: center;
    z-index: -1;
    .icon {
      width: 1rem;
      height: 1rem;
      display: inline-block;
      background-size: contain;
      background-repeat: no-repeat;
    }
    .icon-loading {
      display: block;
      margin: auto;
      background-image: url("~pages/app/assets/images/loading.png");
    }
    .loading-body {
      margin: auto;
      position: absolute;
      height: 90px;
      width: 100%;
      top: 0;
      bottom: 0;
    }
  }

  .press-wrapper {
    position: relative;
    font-size: 0;
    white-space: nowrap;
    img {
      display: inline-block;
    }
    &.press {
      left: -100%;
    }
  }

  .body {
    position: relative;
    background: url('./assets/images/background.jpg') no-repeat;
    background-size: cover;
    opacity: 1;
    transition: opacity 300ms ease;
    &.loading {
      opacity: 0;
    }
  }
  .marquee-box-wrapper {
    height: $marquee-box-height;
    width: 100%;
  }
  .share {
    box-sizing: border-box;
    padding: .27rem 0 .3rem;
    height: 2.75rem;
    text-align: center;
    font-size: 0.36rem;
    color: #919096;
    p {
      margin-top: 0.3rem;
      margin-bottom: 0;
      color: #534b52;
    }
  }
  .lottery {
    padding-bottom: 1.05rem;
    .box {
      text-align: center;
      margin: 0 0.28rem 0;
      padding: 0.3rem 0;
      border-radius: 0.16rem;
      background: url("~pages/app/assets/images/bg-red.png")  no-repeat top left;
      background-size: cover;
      .row {
        &:not(:last-child) {
          margin-bottom: 0.12rem;
        }
      }
      .cell {
        display: inline-block;
        width: 30%;
        position: relative;
        overflow: hidden;
        img {
          border-radius: 0.16rem;
        }
        a {
          position: relative;
          top: 0.1rem;
        }
        &:not(:last-child) {
          margin-right: 0.12rem;
        }
      }
    }
  }

  .tip-remaining-number-of-lottery {
    margin: 0.4rem 0 .32rem;
    text-align: center;
    font-size: $fs-42;
    color: #4a4a4a;
    .highlight {
      color: #e30702;
      font-size: $fs-48;
    }
  }

  .image-btn-wrapper {
    padding: .64rem 0 .32rem;
    &-view-rules {
      text-align: center;
    }
    position: relative;
    overflow: hidden;
    font-size: 0;
    .press-wrapper {
      display: inline-block;
      width: 3.6rem;
      height: .96rem;
      background: url('~pages/app/assets/images/btn-view-rules-press.png') no-repeat;
      background-size: cover;
    }
  }
  .change-number {
    padding-left: .02rem;
    color: #3d7ade;
  }
  .scan-lottery {
    position: absolute;
    right: 14%;
    z-index: 1;
    top: .64rem;
    display: inline-block;
    height: 1rem;
    line-height: 1.1rem;
    padding-left: .14rem;
    color: #3d7ade;
    font-size: .42rem;
  }
  .snh48-game-rules {
    position: relative;
    margin-top: 3.57rem;
  }
  .snh48-game-info {
    padding-top: .1rem;
    font-size: .36rem;
    text-align: center;
    color: #fff;
    p {
      line-height: 1.56;
      padding: 0;
      margin: 0;
    }
  }
</style>

<template>
  <div id="main">
    <div class="loading-tip">
      <div class="loading-body"><i class="icon icon-loading rotating"></i><p>玩命加载中</p></div>
    </div>
    <div :class="['body', {'loading': loading}]" >
      <!-- 模态框 -->
      <modal :closable="modal.closable" :visible="modal.visible" @close="closeModal">
        <component :is="modal.view" :data="modal.data"
          @signin-submit="handleSignIn"
          @lottery-result-retry="closeModal"
          @lottery-rules-close="closeModal"
          @lottery-address-updated="updateUserAddress"
          @lottery-result-share-success="afterLotteryShare">
        </component>
      </modal>
      <!-- 中奖名单跑马灯 -->
      <div class="marquee-box-wrapper">
        <marquee-box v-if="winnerslog.length > 0">
          <marquee v-for="log in winnerslog">{{ log | phone }}</marquee>
        </marquee-box>
      </div>
      <div class="snh48-game-rules">
        <div class="snh48-game-info">
          <p>抽奖活动持续时间：11月3号-11月5号</p>
          <p>VR直播时间：11月5号18:30准时开启</p>
        </div>
        <div class="image-btn-wrapper image-btn-wrapper-view-rules">
          <a @click="openModal('lottery-rules')" href="javascript: void 0;" class="press-wrapper">
          </a>
          <a href="javascript:;" class="scan-lottery" @click="scanLottery">我的奖品</a>
        </div> 
      </div>
      <!-- 社媒分享 -->
      <div class="share">
        <lottery-share :data="{ bigo: false, imgUrl: '' }" @success="afterLotteryShare">
        </lottery-share>
        <p>
          （分享活动给好友，可以增加额外抽奖机会哦~）
        </p>
      </div>
      <!-- 剩余抽奖次数 -->
      <div v-show="user.phone" class="tip-remaining-number-of-lottery">
        <span class="number">{{ user.phone | phone }} <a href="javascript:;" class="change-number" @click="openModal('sign-in', { hasAddress:user.hasAddress }, { closable: true })">更换 </a></span>，
        <span>您还剩余</span>
        <span class="number highlight">{{ user.remaining }}</span>
        <span>次抽奖机会</span>
      </div>      
      <!-- 抽奖转盘 -->
      <div class="lottery">
        <div class="box">
          <div class="row">
            <div class="cell">
              <div :class="['press-wrapper', { 'press': number % 8 === 4 }]">
                <img src="~pages/app/assets/images/raffle/princess-cloak-normal.png">
                <img src="~pages/app/assets/images/raffle/princess-cloak-pressed.png">
              </div>
            </div>
            <div class="cell">
              <div :class="['press-wrapper', { 'press': number % 8 === 5 }]">
                <img src="~pages/app/assets/images/raffle/princess-normal.png">
                <img src="~pages/app/assets/images/raffle/princess-pressed.png">
              </div>
            </div>
            <div class="cell">
              <div :class="['press-wrapper', { 'press': number % 8 === 6 }]">
                <img src="~pages/app/assets/images/raffle/limit-whaleyvr-normal.png">
                <img src="~pages/app/assets/images/raffle/limit-whaleyvr-pressed.png">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="cell">
              <div :class="['press-wrapper', { 'press': number % 8 === 3 }]">
                <img src="~pages/app/assets/images/raffle/sticks-normal.png">
                <img src="~pages/app/assets/images/raffle/sticks-pressed.png">
              </div>              
            </div>
            <div class="cell">
              <a @click="start" href="javascript: void 0;" :class="['press-wrapper', { 'press': progress }]">
                <img src="~pages/app/assets/images/btn-start-lottery.png">
                <img src="~pages/app/assets/images/btn-start-lottery-disable.png">
              </a>
            </div>
            <div class="cell">
              <div :class="['press-wrapper', { 'press': number % 8 === 7 }]">
                <img src="~pages/app/assets/images/raffle/standard-normal.png">
                <img src="~pages/app/assets/images/raffle/standard-pressed.png">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="cell">
              <div :class="['press-wrapper', { 'press': number % 8 === 2 }]">
                <img src="~pages/app/assets/images/raffle/photo-normal.png">
                <img src="~pages/app/assets/images/raffle/photo-pressed.png">
              </div>
            </div>
            <div class="cell">
              <div :class="['press-wrapper', { 'press': number % 8 === 1 }]">
                <img src="~pages/app/assets/images/raffle/tickets-bag-normal.png">
                <img src="~pages/app/assets/images/raffle/tickets-bag-pressed.png">
              </div>
            </div>
            <div class="cell">
              <div :class="['press-wrapper', { 'press': number % 8 === 0 }]">
                <img src="~pages/app/assets/images/raffle/tks-normal.png">
                <img src="~pages/app/assets/images/raffle/tks-pressed.png">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { MarqueeBox, Marquee } from 'components/marquee';
  import Modal from 'components/modal';
  import LotteryRules from 'pages/app/lottery-rules';
  import LotteryResult from 'pages/app/lottery-result';
  import LotteryShare from 'pages/app/lottery-share';
  import LotteryScan from 'pages/app/lottery-scan';
  import SignIn from 'pages/app/forms/sign-in';

  import merge from 'lodash.merge';

  import Promise from 'bluebird';

  import lotteryService from 'services/lottery';

  const speeds = [
    75,
    75,
    75,
    75,
    75,
    125,
    150,
    250,
    275,
    275
  ];

  export default {
    components: { MarqueeBox, Marquee, Modal, LotteryRules, SignIn, LotteryResult, LotteryShare, LotteryScan },
    mounted() {
      Promise.join(lotteryService.getUserInfo(), lotteryService.getWinnerslog(), ({ status, user, userLottery }, winnerslog) => {
        if (winnerslog.length > 0) {
          this.winnerslog = winnerslog;
        }
        if (status === 1) {
          this.user = user;
          this.userLottery = userLottery;
        } else {
          let hasAddress = this.user.hasAddress;
          this.openModal('sign-in', 
          {
            hasAddress
          },
           { closable: false });
        }
        this.loading = false;
      });
    },
    methods: {
      afterLotteryShare(platform) {
        lotteryService.share(platform).then(({ status, remain }) => {
          if (status === 1) {
            this.user.remaining = remain;
            if (this.modal.view === 'lottery-result') {
              this.modal.data.remaining = remain;
            }
          }
        });
      },
      handleSignIn(user) {
        this.user = user;
        if(this.user.hasAddress) {
          this.closeModal();
        }
      },
      updateUserAddress(hasAddress) {
        this.user.hasAddress = hasAddress;
        this.closeModal();
      },
      scanLottery() {
          let lotteryRaffleList = [];
          lotteryService.getUserInfo().then(({ userLottery }) => {
            lotteryRaffleList = userLottery;
            this.openModal('lottery-scan', { lotteryRaffleList }, { closable: true });
          });               
      },
      openModal(view, data = {}, options = { closable: true }) {
        this.modal.view = view;
        this.modal.visible = true;
        this.modal.data = data;
        this.modal.closable = options.closable;
      },
      closeModal() {
        this.modal.visible = false;
        this.modal.view = '';
      },
      lottery(target) {
        this.timer = setTimeout(this.lottery.bind(this), speeds[Math.floor(this.number / 8)], target);
        if (
            (Math.ceil(this.number / 8)) === speeds.length &&
            (this.number % 8) === target
          ) {
          this.stop();
          if (lotteryService.lotteryRaffles[target].bigo) {
            this.user.hasAddress = true;
          }
          setTimeout(() => {
            this.openModal(
              'lottery-result',
              merge(lotteryService.lotteryRaffles[target], {
                remaining: this.user.remaining,
                noChoice: false,
                hasAddress: this.user.hasAddress
              }),
              { closable: !(target > 0 && !this.user.hasAddress) }
            );
          }, 300);
          return;
        }
        this.number++;
      },
      reset() {
        this.number = 0;
      },
      start() {
        if (this.progress) {
          return;
        }
        this.progress = true;
        if (this.user.remaining <= 0) {
          this.progress = false;
          this.openModal('lottery-result', {
            remaining: 0,
            bigo: false,
            imgUrl: lotteryService.lotteryRaffles[0].imgUrl,
            noChoice: true
          });
          return;
        }
        lotteryService.lottery().then(({ status, sid, remaining }) => {
          if (remaining >= 0) {
            this.user.remaining = remaining;
          }
          this.reset();
          this.lottery(sid);
        }).catch((ex) => {
          this.progress = false;
        });
      },
      stop() {
        this.progress = false;
        clearTimeout(this.timer);
      }
    },
    filters: {
      phone(v) {
        if (v) {
          return v.replace(/(\d{3})(?:[\d\*]{4})(\d{4})/, '$1****$2');
        }
        return '';
      }
    },
    data() {
      return {
        loading: true,
        modal: {
          visible: false,
          view: 'lottery-rules',
          closable: true,
          data: {}
        },
        // 当前转盘礼品编号
        number: -1,
        // 目前是否正在抽奖
        progress: false,
        // 用户信息
        user: {
          remaining: -1,
          phone: '',
          uname: '',
          hasAddress: false,
          hasLottery: false
        },
        userLottery: [],
        // 已中奖用户列表
        winnerslog: []
      };
    }
  }
</script>
